<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>电灯开关</title>
    </head>
    <body>
        <img id="light" src="off.png">
        <script>
            /*分析:1.获取图片对象
                  2.绑定单击事件
                  3.每次点击切换图片
                     规则:如果灯是开的 on,切换图片为 off
                         如果灯是关的 off,切换图片为 on
                         使用flag来标记灯的状态
         */
            //1.获取图片对象
            var light = document.getElementById("light");
            flag = false;

            //2.绑定单击事件
            light.onclick = function () {
                //3.切换图片状态
                if (flag) {
                    light.src = "off.png"
                    flag = false;
                } else {
                    light.src = "on.png"
                    flag = true;

                }
            }


        </script>
    </body>
</html>